<!-- AdmissionPage.vue -->
<template>
  <div class="admission-container">
        <!-- 返回按钮 -->
    <!-- <div class="back-section">
      <router-link to="/admissionCareerPage" class="back-link">
        <span class="back-icon">←</span>
        <span>返回</span>
      </router-link>
    </div> -->
    <!-- 动态渲染组件：根据 currentComponent 切换显示内容 -->
    <!-- 可选：缓存组件状态，避免刷新丢失 -->
    <keep-alive>
      <component 
        :is="currentComponent" 
        @changeComponent="handleComponentChange" 
        @updateExamStatus="updateExamStatus"
        :examParams="currentParams.examParams"
        :registerParams="currentParams.registerParams"
      />
    </keep-alive>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
// 导入三个业务组件
import AdmissionInfo from './components/AdmissionInfo.vue'; // 招生信息组件
import AdmissionExam from './components/AdmissionExam.vue'; // 考试组件
import StudentRegister from './components/StudentRegister.vue'; // 注册组件

// 初始显示“招生信息”组件
const currentComponent = ref(AdmissionInfo);
// 存储考试状态
const isExamPassed = ref(false);
// 存储组件间传递的参数
const currentParams = reactive({
  examParams: {},
  registerParams: {}
});

// 处理组件切换请求
const handleComponentChange = (data) => {
  // 支持两种格式：字符串或对象
  const targetKey = typeof data === 'string' ? data : data.target;
  const params = typeof data === 'string' ? {} : data.params || {};
  
  // 校验：进入注册页必须先通过考试
  if (targetKey === 'register' && !isExamPassed.value) {
    alert('请先通过入学考试');
    return;
  }
  
  // 根据 key 映射到对应组件
  const componentMap = {
    info: AdmissionInfo,
    exam: AdmissionExam,
    register: StudentRegister
  };
  
  // 更新当前组件
  if (componentMap[targetKey]) {
    currentComponent.value = componentMap[targetKey];
    
    // 保存参数供子组件使用
    if (targetKey === 'exam') {
      currentParams.examParams = params;
    } else if (targetKey === 'register') {
      currentParams.registerParams = params;
    }
  }
};

// 更新考试状态
const updateExamStatus = (passed) => {
  isExamPassed.value = passed;
};
</script>
<style scoped>
.back-section {
  padding-top: 30px;  
}
</style>